// out: ../css/
@import './base';


@vw:3.75vw;
header {
    width: 100%;
    height: (50 / @vw);

    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    z-index: 999;
    padding: 0 (15/@vw);
    background-color: #fff;
    .left {
        width: (235/@vw);
        height: (50/@vw);
        background: url(../assets/head.png) no-repeat;
        background-size: contain;
    }
    .download {
        width: (80/@vw);
        height: (30/@vw);
        background-color: #ffe31b;
        border-radius: (30/@vw);
        text-align: center;
        line-height: (30/@vw);
        font-size: (16/@vw);
    }
}

.content {
    width: 100%;
    height: 3000px;
    padding-top: (50/@vw);
    background-color: pink;
}


.download-more {
    width: (345/@vw);
    height: (45/@vw);
    background-color: #fff;
    border-radius: (22.5/@vw);
    position: fixed;
    bottom: (40/@vw);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    padding: 0 (10/@vw) 0 (15/@vw);
    .logo {
        
        img {
            height: (36/@vw);
            width: (36/@vw);
            
        }
        margin-right: (10/@vw);
    }
    p {
        flex: 1;
        font-size: (16/@vw);
    }
    .right {
        width: (32/@vw);
        height: (32/@vw);
        background-color: #f2f3f5;
        text-align: center;
        line-height: (32/@vw);
        border-radius: 50%;
        .icon-right {
            font-size: (16/@vw);
        }
    }

    
}


.main {
    
    width: 100%;
    padding: 0 (15/@vw);
    padding-top: (50/@vw);
    background-color: #f9fafb;
    .search {
        height: (32/@vw);
        background-color: #f2f4f5;
        text-align: center;
        line-height: (32/@vw);
        border-radius: (16/@vw);
        margin: (10/@vw) 0;
        color: #ccc;
        font-size: (16/@vw);
    }
    .banner {
        height: (108/@vw);
        width: 100%;
        border-radius: (5/@vw);
        overflow: hidden;
        img {
            height: (108/@vw);
            width: 100%;
            object-fit: cover;
        }
    }
    .rank {
        width: 100%;
        ul.rank-list {
            li.rank-item {
                background-color: #fff;
                margin-bottom: (16/@vw);
                display: flex;
                height: (105/@vw);
                img {
                    height: (105/@vw);
                    margin-right: (20/@vw);
                    border-radius: (10/@vw);
                }
                .item-right {
                    text-align: left;
                    h5 {
                        font-size: (14/@vw);
                        line-height: (28/@vw);
                        .icon-right {
                            font-size: (16/@vw);
                        }
                    }
                    ol {
                       list-style: none;
                        li {
                            font-size: (12/@vw);
                            color: #998f8f;
                            line-height: (23/@vw);
                        }
                    }
                }
            }
            li.rank-item:last-child {
                margin-bottom: 0;
            }
        }
    }
    .recommend {
        .recommend-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            li {
                width: (105/@vw);
                margin-bottom: (16/@vw);
                a {
                    .item-img {
                        position: relative;
                        img {
                            width: 100%;
                            border-radius: (10/@vw);
                            
                        }
                        span {
                            position: absolute;
                            left: 0;
                            bottom: 0;
                            width: (70/@vw);
                            height: (28/@vw);
                            background-color: rgba(0, 0, 0, 0.7);
                            color: #fff;
                            font-size: (14/@vw);
                            text-align: center;
                            line-height: (28/@vw);
                            border-bottom-left-radius: (10/@vw);
                            border-top-right-radius: (10/@vw);
                        }
                    }
                    p {
                        font-size: (14/@vw);
                        
                    }
                }
            }
        }
    }
}

.list-head {
    display: flex;
    justify-content: space-between;
    height: (60/@vw);
    align-items: center;

    h3 {
        font-size: (22/@vw);
    }

    p {
        color: #998f8f;
    }
}

